<template>
  <div class="main">
    <top-bar></top-bar>
    <div class="main-mains w90">
      <div class="main-mains-l">
        <router-link to="/main">
          <div class="main-mains-l-return">
            <span>←</span>
            返回首页
          </div>
        </router-link>
        <div class="active">便民电话</div>
        <router-link to="/living">
          <div>发布生活区信息</div>
        </router-link>
        <router-link to="/propertylist">
          <div>已发布生活区信息</div>
        </router-link>
      </div>
      <div class="main-mains-r">
        <div class="main-mains-table">
          <div class="main-mains-phoness" @click="addPhone()">新增便民电话</div>
          <div class="main-mains-list" v-show="dataFlag">
            <ul>
              <li class="clear" v-for="(item,index) in dataList" :key="index">
                <div class="fl">{{item.name}}</div>
                <div class="fr main-mains-list-phone">
                  <div class="fl main-mains-list-phone1">
                    <img src="../../../static/images/phone1.png" alt>
                  </div>
                  <div class="fl main-mains-list-phone2">{{item.phone}}</div>
                  <div class="fl main-mains-list-phone3">
                    <img
                      @click="edit(item.name,item.phone,item.id)"
                      src="../../../static/images/edit1.png"
                      alt
                    >
                  </div>
                  <div class="fl main-mains-list-phone3">
                    <img @click="removePhone(item.id)" src="../../../static/images/remove.png" alt>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="main-pages" v-show="dataFlag">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="15"
              @current-change="changePage"
              :total="totalNum"
            ></el-pagination>
          </div>
        </div>
        <div class="main-mains-none" v-show="!dataFlag">
          <img src="../../../static/images/none.png" alt>
          <br>
          <div>暂无记录</div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="propertyFlag || editFlag"></div>
    <div class="property-mask" v-show="propertyFlag">
      <div class="property-mask-top">新增便民电话名称及号码</div>
      <div class="property-mask-input">
        <el-input v-model.trim="name" clearable maxlength="7" placeholder="请输入便民电话名称"></el-input>
      </div>
      <div class="property-mask-input">
        <el-input v-model.trim="phone" clearable maxlength="11" placeholder="请输入便民电话号码"></el-input>
      </div>
      <div class="property-mask-btn clear">
        <div class="fl" @click="closeMask()">取消</div>
        <div class="fl" @click="addPhones()">确定</div>
      </div>
    </div>
    <div class="property-mask" v-show="editFlag">
      <div class="property-mask-top">编辑便民电话名称及号码</div>
      <div class="property-mask-input">
        <el-input v-model.trim="editname" maxlength="7" clearable></el-input>
      </div>
      <div class="property-mask-input">
        <el-input v-model.trim="editphone" maxlength="11" clearable></el-input>
      </div>
      <div class="property-mask-btn clear">
        <div class="fl" @click="closeMask()">取消</div>
        <div class="fl" @click="editPhones()">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "../public/top";
export default {
  components: {
    topBar
  },
  data() {
    return {
      propertyFlag: false,
      name: "",
      phone: "",
      dataList: [],
      dataFlag: false,
      totalNum: 1,
      pages: 1,
      editFlag: false,
      editname: "",
      editphone: "",
      phoneId: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    removePhone(ids) {
      let _this = this;
      this.$confirm("此操作将删除该电话, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let datas = {
            id: ids
          };
          datas = JSON.stringify(datas);
          _this
            .$http({
              url: _this.urls + "/phone/delete",
              method: "post",
              data: datas
            })
            .then(function(res) {
              let data = res.data;
              if (data.status == "success") {
                _this.$message({
                  showClose: true,
                  message: "删除成功",
                  type: "success"
                });
                _this.getData();
              } else {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: "error"
                });
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    editPhones() {
      let _this = this;
      if (_this.editname == "") {
        _this.$message({
          showClose: true,
          message: "请输入便民电话名称",
          type: "error"
        });
        return false;
      }
      if (_this.editphone == "") {
        _this.$message({
          showClose: true,
          message: "请输入便民电话号码",
          type: "error"
        });
        return false;
      }
      let datas = {
        name: _this.editname,
        phone: _this.editphone,
        id: _this.phoneId
      };
      _this
        .$http({
          url: _this.urls + "/phone/update",
          method: "post",
          data: datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.editFlag = false;
            _this.$message({
              showClose: true,
              message: "编辑成功！",
              type: "success"
            });
            _this.getData();
          } else {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    edit(names, phones, id) {
      this.editFlag = true;
      this.editname = names;
      this.editphone = phones;
      this.phoneId = id;
    },
    addPhones() {
      let _this = this;
      if (_this.name == "") {
        _this.$message({
          showClose: true,
          message: "请输入便民电话名称",
          type: "error"
        });
        return false;
      }
      if (_this.phone == "") {
        _this.$message({
          showClose: true,
          message: "请输入便民电话号码",
          type: "error"
        });
        return false;
      } else if (_this.phone.length > 12) {
        _this.$message({
          showClose: true,
          message: "请输入正确的电话号码！",
          type: "error"
        });
        return false;
      }
      let datas = {
        name: _this.name,
        phone: _this.phone
      };
      _this
        .$http({
          url: _this.urls + "/phone/add",
          method: "post",
          data: datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.propertyFlag = false;
            _this.$message({
              showClose: true,
              message: "添加成功！",
              type: "success"
            });
            _this.getData();
            _this.name = "";
            _this.phone = "";
          } else {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getData() {
      let _this = this;
      _this
        .$http({
          url:
            _this.urls +
            "/phone/list" +
            "?PageSize=15&startPage=" +
            _this.pages,
          method: "get"
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.dataList = data.data.list;
            _this.totalNum = data.data.total;
            if (data.data.total) {
              _this.dataFlag = true;
            }
          } else {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    changePage(val) {
      this.pages = val;
      this.getData();
    },
    addPhone() {
      this.propertyFlag = true;
    },
    closeMask() {
      this.propertyFlag = false;
      this.editFlag = false;
    }
  }
};
</script>

<style lang="less" scoped>
@import "property.less";
</style>